

import React, { useRef, useState } from 'react'
import { Row, Col, Form, Input, Button, Typography, Select, Modal, Table, Tag, Space, Avatar, Popconfirm, Tooltip, Radio, Checkbox } from "antd"
import { useEffect } from 'react';
import { observer } from 'mobx-react';
import moment from "moment"
import { UploadOutlined, DownloadOutlined, FormOutlined, DeleteOutlined, FolderViewOutlined } from '@ant-design/icons';
import { consumers } from 'stream';
import user from '../../mobx/store/user';
import { ajax } from '../../api';
import { ColumnsType } from 'antd/es/table';
import anno from '../../mobx/store/anno';

const { Column, ColumnGroup } = Table;
const { Title } = Typography


function AnnoList({ history }: any) {

    const { annList, changeannList, vipgetannList } = anno

    const [keyboard, setKeyboard] = React.useState(true);

    const { annoList, getAnnoListAsync, getAnnoList } = user
    const [type, setType] = useState<any>(null)
    useEffect(() => {
        changeannList({})
    }, [])

    const keywordEle: any = useRef()

    const todoStartSearch = () => {
        const keyword = keywordEle.current.state.value
        console.log(keyword);

        getAnnoListAsync({
            type,
            keyword
        })
    }


    const confirm = async (item: any, index: any) => {

        let { code, result }: any = await ajax.deleteanno({ _id: item._id })
        if (code == 200) {
            annoList.splice(index, 1)
            getAnnoList([...annoList])
        }
    }

    const gotoAnnoDetail = (item: any) => {
        history.push("/main/anno/detail?aid=" + item._id)
    }
    const gotoEditAnno = (item: any) => {
        history.push("/main/anno/dit?aid=" + item._id)
    }


    const onChange = (item: any) => {
        // console.log(e.target.checked);
        console.log(item._id);



    }
    const coolo = async (item: any) => {
        console.log(item._id);
        console.log(keyboard);
        let recommended = keyboard
        let { code, result }: any = await ajax.setannoitem({
            recommended,
            _id: item._id
        })
        if (code == 200) {

            vipgetannList(annList)
        }



    }

    return (

        <div style={{ height: "100%" }}>
            <Title level={2}> 公告列表 </Title>
            <Row>
                <Col span={6}>
                    <Input placeholder='请输入搜索关键字' ref={keywordEle}></Input>
                </Col>
                <Col span={6} offset={1}>
                    <Button danger onClick={todoStartSearch} >搜索</Button>
                </Col>
            </Row>
            <Row style={{ marginTop: 30 }} >
                <Col span={20}>
                    <Table
                        dataSource={annList}
                        sticky
                        bordered
                        id="table"
                        pagination={{ pageSize: 6 }}
                        rowKey={(item: any) => item._id}

                    >
                        <Column
                            title="#"
                            align='center'
                            render={(text, item, index) => (
                                <b>{index + 1}</b>
                            )}
                        />
                        <Column
                            title="公告名称"
                            align='center'
                            dataIndex="title"
                            key="title"

                            render={(text) => (
                                <b>{text}</b>
                            )}

                        />
                        {/* <Column title="发布人"
                            align='center'
                            dataIndex="userInfo"
                            key="userInfo"
                            render={(text) => (
                                <b>{text.username}</b>
                            )}
                        /> */}
                        <Column
                            title="发表时间"
                            dataIndex="time"
                            key="time"
                            align='center'
                            render={(text) => (
                                <p> {moment(text).format("YYYY-DD-MM HH:mm")}</p>
                            )}
                        />
                        <Column
                            title="推荐"
                            dataIndex="recommended"
                            key="recommended"
                            align='center'
                            render={(text, item: any, index: any) => (
                                <Checkbox

                                    onChange={() => {
                                        console.log(item);

                                        coolo(item)
                                        setKeyboard(!keyboard);
                                    }}

                                    defaultChecked={text}

                                ></Checkbox>
                                //     <Checkbox
                                //     onChange={() => {
                                //         setKeyboard(!keyboard);
                                //     }}
                                //     checked={keyboard}
                                // >

                                // </Checkbox>
                            )}
                        />

                        <Column
                            title="操作"
                            align='center'
                            render={(text, item: any, index: any) => (
                                <div>
                                    <Popconfirm
                                        title="你真的要删除吗?"
                                        onConfirm={() => confirm(item, index)}
                                        okText="确定"
                                        cancelText="不了"
                                    >
                                        <Button danger shape="circle" icon={<DeleteOutlined />} size="small" />
                                    </Popconfirm>
                                    <Tooltip placement="top" title={'查看'}>
                                        <Button style={{ margin: "0 5px" }} onClick={() => gotoAnnoDetail(item)} shape="circle" icon={<FolderViewOutlined />} size="small" />
                                    </Tooltip>
                                    <Tooltip placement="top" title={'编辑'} >
                                        <Button type="primary" onClick={() => gotoEditAnno(item)} shape="circle" icon={<FormOutlined />} size="small" />
                                    </Tooltip>

                                </div>
                            )}
                        />
                    </Table>
                </Col>

            </Row >
        </div >
    )
}


export default observer(AnnoList)